<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>
    .body {
        position: absolute;
        text-align: center;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 12px;
        line-height: 166.6%;
        max-height: 1440px;
        min-width: 1220px;
        min-height: 700px;
        font-family: PingFangSC-Regular, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", verdana, sans-serif, Simsun, STXihei;
        zoom: 1;
    }

    .inventory {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        width: 95%;
    }

    h1 {
        margin: 20px;
        color: #009688;
        font-family: PingFangSC-Regular, 方正姚体, "\5FAE\8F6F\96C5\9ED1", verdana, sans-serif, Simsun, STXihei;
    }

    .layui-form-label {
        width: 100px;
    }

    .layui-input-block {
        margin-left: 130px;
        min-height: 36px;
    }
</style>

<body>
    <div id="app" class="inventory">
        <h1>
            图书入库
        </h1>
        <div style="width: 650px; position: relative; left:25%;">
            <form class="layui-form" method="post"  action="/store/bookstore">
                <div class="layui-form-item">
                    <label class="layui-form-label">ISBN</label>
                    <div class="layui-input-block">
                        <input type="text" name="ISBN" lay-verify="required" lay-reqtext="ISBN是必填项" placeholder="请输入"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">条形码</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" lay-verify="required" lay-reqtext="条形码是必填项" placeholder="请输入"
                            autocomplete="off" class="layui-input" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">书名</label>
                    <div class="layui-input-block">
                        <input type="text" name="bookname" lay-verify="required" lay-reqtext="书名是必填项" placeholder="请输入"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">作者</label>
                    <div class="layui-input-block">
                        <input type="text" name="author" lay-verify="required" lay-reqtext="作者是必填项" placeholder="请输入"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">译者</label>
                    <div class="layui-input-block">
                        <input type="text" name="translator" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">出版社</label>
                    <div class="layui-input-block">
                        <input type="text" name="publisher" lay-verify="required" lay-reqtext="出版社是必填项"
                            placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">索书号</label>
                    <div class="layui-input-block">
                        <input type="text" name="bookcase" lay-verify="required" lay-reqtext="索书号是必填项" placeholder="请输入"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图书类型</label>
                    <div class="layui-input-inline">
                        <select name="booktype" lay-verify="required">
                            <option value="">请选择图书类型</option>
                            <option value="中国文学">中国文学</option>
                            <option value="外国文学">外国文学</option>
                            <option value="经济学">经济学</option>
                            <option value="计算机科学">计算机科学</option>
                            <option value="教育学">教育学</option>
                            <option value="园林设计">园林设计</option>
                            <option value="儿童读物">儿童读物</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单价</label>
                    <div class="layui-input-block">
                        <input type="text" name="price" lay-verify="required" lay-reqtext="单价是必填项" placeholder="请输入"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-block">
                        <textarea name="introduce" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">入库数量</label>
                        <div class="layui-input-inline">
                            <input type="text" name="total_inventory" lay-verify="required|number" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">版次</label>
                        <div class="layui-input-inline">
                            <input type="text" name="publish_num" lay-verify="required" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">录入人帐号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="operator" lay-verify="required|number" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">录入日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
        </div>
        <div style="height: 40px;"></div>
    </div>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../sys/vue.min.js"></script>
    <script>
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                title: function (value) {
                    if (value.length == 0) {
                        return '未输入字符';
                    }
                }
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });

            //监听提交
            form.on('submit(demo1)', function (data) {
            });
        });
    </script>
</body>

</html>